<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
     *{
	    margin:0;
		padding:0;
	 }
	 html,body{
	   height:100%;
	 }
	 canvas{
	    /*width:100%;
		height:100%;*/
		background-color:black;
		display:block;
	 }
  </style>
 </head>
 <body>
    <canvas id="canvas">你的浏览器不支持canvas绘图标签，请你更换浏览器</canvas>
 </body>
 <script>
    var can = document.getElementById("canvas");
	var ctx = can.getContext("2d");
    //获取浏览器窗口的宽高
	var w = can.width = window.innerWidth;
	var h = can.height = window.innerHeight;

	//监听浏览器窗口的变化
	window.onresize = function(){
	  var w = can.width = window.innerWidth;
	  var h = can.height = window.innerHeight;
	}
	//绘制一个矩形
	//ctx.fill() 填充方法，实心的
	//ctx.stroke() 触笔方法，空心
	/*ctx.fillStyle = "red";
    ctx.fillRect(50,50,50,50); //坐标，宽高
	ctx.strokeStyle = "red";
	ctx.strokeRect(150,150,50,50);

	//绘制圆形
	ctx.arc(300,300,50,0,Math.PI*2,false); //绘制圆形路径
	ctx.strokeStyle = "red";
	ctx.stroke();*/

	//canvas绘图原理
	/*var y = 0;
	ctx.strokeStyle = "red";
	setInterval(function(){
	  y++;
	  ctx.clearRect(0,0,w,h);//清空画布
	  ctx.beginPath();//开始路径（提笔再重新绘制）
	  ctx.arc(100,y,10,0,Math.PI*2,false);
	  ctx.fill();
	  ctx.fillStyle = "red";
	 
	},100); */
    
	var num = 1000;//雪花个数
	ctx.fillStyle = "white";
	var points = [];
	//push()数组方法，往数组里面添加元素
    for(var i = 0;i < num;i++){
	   points.push({
	       x : Math.random()*w,
		   y : Math.random()*h,
		   r : Math.random()*5
	   });
	}

	function draw(){
	   ctx.clearRect(0,0,w,h);
	   for(var i = 0;i < num;i++){
	   ctx.beginPath();
	   ctx.arc(points[i].x,points[i].y,points[i].r,0,Math.PI*2,false);
	     ctx.fill();
	 } 
	  //更新坐标
	   update();
	}
	setInterval(draw,30);
	//更新坐标
	function update(){
       for(var i = 0;i < num;i++){
	      points[i].y += Math.random()*5;
		  if(points[i].y > h){
		     points[i].y = 0;
		  }
	   }
	}
	
	 
 </script>
</html>
